<template>
    <view
      class="content"
      :style="{
        'padding-top': height + 'px',
      }"
    >
      <view
        :style="{
          height: statusBarHeight + 'px',
        }"
      >
      </view>
      <view
        class="head"
        :style="{
          top: statusBarHeight + 'px',
        }"
      >
        <view class="head_left">
          <u-icon
            name="arrow-left"
            color="#444444"
            size="24"
            :bold="true"
            @click="toBack"
          ></u-icon>
        </view>
        <view class="text">使用说明</view>
        <view class="head_right"> </view>
      </view>
  
      <view class="box" v-html="content">
     
      </view>


      <floatingBall></floatingBall>
    </view>
  </template>
    
    <script>
  import selectType from "@/components/selectType.vue";
  export default {
    components: {
      selectType,
    },
    data() {
      return {
        statusBarHeight: 0,
        height: 0,
        content: "",
      };
    },
    created() {
      const statusBarHeight = uni.getSystemInfoSync(); // 获取手机状态栏高度
  
      this.statusBarHeight = statusBarHeight.statusBarHeight;
      this.$nextTick(() => {
        uni
          .createSelectorQuery()
          .select(".head")
          .boundingClientRect((data) => {
            this.height = data.height;
          })
          .exec();
      });
      this.getContent();
    },
    methods: {
      toBack() {
        uni.navigateBack({
          delta: 1,
        });
      },
  
      getContent() {
        this.$http
          .appversionAgreement({})
          .then((res) => {
            console.log(res.data.coupon, "使用说明");
            this.content = res.data.coupon.content;
          })
          .catch((error) => {
            console.log(error, "错误");
            uni.$u.toast(error);
          });
      },
    },
  };
  </script>
    
    <style scoped lang="scss">
  .content {
    box-sizing: border-box;
  }
  .head {
    width: 100%;
    padding: 18rpx 30rpx 47rpx;
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    z-index: 99;
    background: #fff;
  
    .head_left {
      position: absolute;
      left: 30rpx;
    }
  
    .head_right {
      position: absolute;
      right: 30rpx;
      display: flex;
    }
  
    .text {
      font-size: 36rpx;
      font-family: PingFang SC-Bold, PingFang SC;
      font-weight: 400;
      color: #444444;
    }
  }
  .box {
    padding: 32rpx 30rpx;
    box-sizing: border-box;
    font-size: 30rpx;
    line-height: 56rpx;
  }
  </style>